<template>
		<view class="non-urgent-service">
			<!-- 订单信息 -->
			<view v-if="!isOrder">
				<view class="order-info">
					<view class="section-title">我的订单</view>
					<view class="shop-name">
						<text>{{shopName}}</text>
						<view class="phoneClass" @tap="contactService(service)">
							<u-icon name="phone" color="var(--primary-color)"  size="20"></u-icon>
							<text style="margin-left: 3px;">联系商家</text>
						</view>
					</view>
					<view class="problem-description">
						<text class="label">问题描述：</text>
						<text class="description">{{problemDescription}}</text>
					</view>
					
					<!-- 上传图片 -->
					<view class="upload-section">
						<text class="label">上传图片：</text>
						<view class="image-preview">
							<u--image
							class="preview-image"
							    :showLoading="true"
							    v-for="(img, index) in images" :key="index" :src="img"
							    width="100%"
							    height="100%"
							    @click="click"
							  ></u--image>
				
						</view>
					</view>
				</view>
				
				<!-- 操作按钮 -->
				<view class="action-buttons">
					<button class="btn cancel" @click="cancelOrder">取消订单</button>
					<button class="btn confirm" @click="confirmOrder">等待确认</button>
				</view>
			</view>
			<view v-if="isOrder">
				<!-- 地图区域 -->
				<view class="map-container">
					<map
						id="googleMap"
						:latitude="mapLatitude"
						:longitude="mapLongitude"
						:scale="scale"
						:markers="markers"
						:controls="controls"
						show-location
						@controltap="onControlTap"
						@regionchange="onRegionChange"
					></map>
				</view>
				
				<!-- 附近服务 -->
				<view class="service-list">
					<view class="service-title">附近服务</view>
					<view class="item-box">
						<view
							v-for="(service, index) in services"
							:key="index"
							class="service-item"
						>
							<view @click="orderClick">
								<view class="service-info">
									<view class="name-box">
										<text class="service-name">{{ service.name }}</text>
										<text class="service-type">{{ service.type }}</text>
									</view>
									<u-row justify="start">
										<u-rate count="5" v-model="service.value" active-color='var(--primary-color)' gutter="0" size="14"></u-rate>
										<text class="service-mark">{{service.value}}.0</text>
									</u-row>
								</view>
								<view class="price-box">
									<text class="service-price">时薪：{{ service.price }}</text>
									<text class="service-distance">{{ service.distance }}km</text>
								</view>
								<view class="service-actions">
									<view class="tagList">
										<u-tag class="tagItem" text="维修" type="warning" plain size="mini"></u-tag>
										<u-tag class="tagItem" text="钣喷" type="success" plain size="mini"></u-tag>
									</view>
									<view class="phoneClass" @tap="contactService(service)">
										<u-icon name="phone" color="var(--primary-color)"  size="20"></u-icon>
										<text style="margin-left: 3px;">联系商家</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			 <!-- 会员提示弹窗 -->
			<view v-if="showPopup"  class="local-popup">
				<view class="membership-dialog" >
					<view class="dialog-title">成为会员可以查看全部信息</view>
					<view class="dialog-price">月卡20/月</view>
					<view class="button-group">
						<button class="openClass" @click="openMembership">立即开卡</button>
						<button class="closeClass" @click="closePopup">取消</button>
					</view>
				</view>
			</view>
		</view>
</template>
<script>
export default {
  data() {
    return {
			showPopup: true,
			isOrder:true,
      services: [
        // 服务商列表
        {
          name: 'XXXXXX',
          type: 'MC',
          price: '10~15$',
          distance: 20.21,
					value: 4,
        },
        {
          name: 'XXXXXX',
          type: 'MC',
          price: '10~15$',
          distance: 20.31,
					value: 5,
        },
				{
				  name: 'XXXXXX',
				  type: 'MC',
				  price: '10~15$',
				  distance: 20.31,
					value: 3,
				},
				{
				  name: 'XXXXXX',
				  type: 'MC',
				  price: '10~15$',
				  distance: 20.31,
					value: 2,
				},
      ],
			userInfo: {
				name: '',
				isMember: false
			},
			shopName: "xxxxxxx店", // 店铺名称
			problemDescription: "xxxxxxxxxxxxxx", // 问题描述
			images: [
				"https://uviewui.com/album/1.jpg",
				"https://uviewui.com/album/1.jpg",
				"https://uviewui.com/album/1.jpg",
				"https://uviewui.com/album/1.jpg",
			], // 上传的图片
			contactInfo: "" ,// 联系方式
			
			// 地图基础配置
			mapLatitude: 31.230416,
			mapLongitude: 121.473701,
			scale: 14, // 初始缩放级别（3-20）
			
			// 地图控制器
			controls: [{
				id: 11,
				iconPath: '/static/zoom-in.png',
				position: { left: 10, top: 100, width: 30, height: 30 }
			}, {
				id: 12,
				iconPath: '/static/zoom-out.png',
				position: { left: 10, top: 140, width: 30, height: 30 }
			}],
			
			// 标记点
			markers: [{
				id: 1,
				latitude: 31.230416,
				longitude: 121.473701,
				title: "当前位置",
				// iconPath: '/static/location-pin.png'
			}]
		};
  },
	onLoad() {
		// 从缓存加载用户信息
		this.loadUserInfo();
		
		// 检查会员状态
		// this.checkMembership();
	},
	onReady() {
	  this.updateMap();
	},
	mounted() {
	},
  methods: {
		cancelOrder(){
			this.isOrder=true
		},
		confirmOrder(){
			
		},
		orderClick(){
			uni.navigateTo({
				// url: `/pages/order/detail?orderId=${orderId}`
				url: `/pages/order/detail/index?orderId=${1}&type=1`
			})
		},
		 // 加载用户数据
		loadUserInfo() {
			const info = uni.getStorageSync('userInfo') || {};
			this.userInfo = {
				name: info.name || '新',
				isMember: info.membership === 'vip' // 根据实际字段调整
			};
		},
		
		// 检查会员状态
		checkMembership() {
			// 非会员显示弹窗
			if (!this.userInfo.isMember) {
				this.showPopup = true;
			}
		},
    onMarkerTap(e) {
      console.log('点击了地图标记：', e.markerId);
    },
		
		
		// 缩放控制
		  onControlTap(e) {
		    const controlId = e.controlId;
		    if (controlId === 1) {
		      this.scale = Math.min(this.scale + 1, 20); // 放大
		    } else if (controlId === 2) {
		      this.scale = Math.max(this.scale - 1, 3); // 缩小
		    }
		    this.updateMap();
		  },
		  
		  // 地图区域变化监听
		  onRegionChange(e) {
		    if (e.type === 'end') {
		      this.mapContext.getCenterLocation({
		        success: res => {
		          this.mapLatitude = res.latitude;
		          this.mapLongitude = res.longitude;
		        }
		      });
		    }
		  },
		  
		  // 更新地图
		  updateMap() {
		    this.mapContext = uni.createMapContext('googleMap', this);
		    this.mapContext.moveToLocation();
		  },
			
			
			
    contactService(service) {
      console.log('联系商家：', service.name);
      uni.makePhoneCall({
        phoneNumber: '123456789', // 示例电话号码
      });
    },
    navigateTo(page) {
      console.log('跳转到：', page);
      uni.navigateTo({
        url: `/pages/tabbar/${page}/${page}`, 
      });
    },
		// 开通会员
		openMembership() {
			uni.showLoading({ title: '处理中...' });
			this.showPopup = false;
			// 调用开通会员API
			uni.request({
				url: 'https://your-api.com/membership/upgrade',
				method: 'POST',
				data: { userId: this.userInfo.id },
				success: (res) => {
					if (res.data.success) {
						// 更新本地状态
						this.userInfo.isMember = true;
						uni.setStorageSync('userInfo', {
							...this.userInfo,
							membership: 'vip'
						});
						
						uni.showToast({ title: '开通成功！', icon: 'success' });
					}
				},
				complete: () => {
					this.showPopup = false;
					uni.hideLoading();
				}
			});
		},
		
		// 关闭弹窗
		closePopup() {
			this.showPopup = false;
		}
  },
};
</script>
<style scoped lang="scss">
.map-container {
	height: 200px;
	background-color: #eaeaea;
}
.order-info {
	background-color: white;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-top: 20rpx;
	.section-title {
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	.shop-name {
		font-size: 30rpx;
		color: #666;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.problem-description {
		margin-bottom: 30rpx;
	}
	
	.label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}
	
	.description {
		font-size: 28rpx;
		color: #333;
	}
	
	.upload-section {
		margin-bottom: 30rpx;
	}
	
	.image-preview {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		.preview-image {
			width: 190rpx;
			height: 190rpx;
			margin-right: 15rpx;
			margin-bottom: 15rpx;
			border-radius: 8rpx;
			.u-image{
				width:100%;
			}
		}
	}
}
.action-buttons {
	  display: flex;
	  justify-content: right;
	  margin-top: 40rpx;
		.btn {
		  margin: 0 15rpx;
		  border-radius: 50rpx;
		  font-size: 14px;
			padding: 0 20px;
		}
		.cancel {
		  background-color: #f8f8f8;
		  color: #666;
		  border: 1rpx solid #ddd;
		}
		.confirm {
		  color: var(--primary-color);
			border: 1px solid var(--primary-color);
		}
	}
.service-list {
  padding: 1rem;
	.service-title {
	  font-size: 1rem;
	  color: var(--text-color-b);
	  margin-bottom: 0.8rem;
	}
	.item-box{
		height:45vh;
		overflow: auto;
	}
	.service-item {
		
	  padding: 1rem 0;
	  margin-bottom: 0.8rem;
	  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}
	.service-info {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 10px;
		.service-name {
			font-size: 1rem;
			color: var(--text-color-b);
		}
		.service-type {
		  font-size: 0.6rem;
			color: #fff;
			padding:2px 5px ;
			margin-left: 10px;
			border-radius: 10px;
			background-color:var(--primary-color) ;
		}
		.service-mark{
			margin-left: 10px;
			font-size: 0.8rem;
			color: var(--primary-color);
		}
	}
	.price-box{
		color:  var(--text-color-g);
		display: flex;
		justify-content:space-between;
		padding: 2px;
		margin-bottom: 6px;
		font-size: 0.9rem;
		color: var(--text-color-g);
	}
	.service-actions {
	  display: flex;
	  justify-content: space-between;
	}
	.phoneClass{
		color: var(--text-color-g);
		font-size: 0.9rem;
		display: flex;
		align-items: center;
	}
	.service-actions>view{
		display: flex;
		justify-content: center;
	}
	.service-actions .tagList{
		margin-top: 5px;
	}
	.service-actions .tagList .tagItem{
		margin-right: 5px;
	}
}

/* 弹窗 */
.local-popup{
	position: absolute; 
	top: 0; left: 0; 
	width: 100%; height: 100%; 
	background: rgba(190,190,190,0.9);
	z-index: 999;
	.membership-dialog{
		font-size: 1rem;
		text-align: center;
		color: var(--text-color-g);
		background: white; 
		margin: 2rem; 
		padding: 2rem; 
		border-radius: 1rem;
		margin-top: 4rem;
	}
	.dialog-price{
		color: var(--text-color-b);
		margin: 1rem 0 1.6rem;
	}
	.button-group{
		display: flex;
		justify-content: center;
	}
	.button-group button{
		font-size: 0.9rem;
		margin: 0;
		padding:0 40rpx;
		border-radius: 50rpx;
		margin: 16rpx;
		border: 1px solid var(--primary-backgrond-color);
		color: var(--text-color-g);
	}
	.button-group button::after {
		border: 0 !important;
	}
	.button-group  .openClass{
		// border: 1px solid var(--primary-color);
		border: 0;
		background-color: #ff9900;
		color: #fff;
	}
}
</style>
